<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS3转换功能(www.jb51.net)</title>
		<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.min.js"></script>
		<style type="text/css">
			body {
				background-color: #000;
			}
			.main{
				padding-top: 300px;
				/*默认景深的中心点，为50% 50%;*/
				-webkit-perspective-origin: 50% 50%;
			}
			.container {
				position: absolute;
				-webkit-perspective: 500;
			}
			
			.cube {
				margin: 0 auto;
				width: 200px;
				height: 200px;
				position: relative;
				-webkit-animation: spin 8s infinite linear;
				-webkit-transform-style: preserve-3d;
			}
			
			.cube .rect {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200px;
				height: 200px;
				border-radius: 5px;
				border: 1px solid #ccc;
				font-size: 125pt;
				text-align: center;
				line-height: 200px;
				background-color: #bbb;
				opacity: 0.5;
			}
			
			.cubeRight .rect {
				top: -200px;
				left: 300px;
			}
			
			.cubeLeft .rect {
				top: 200px;
				right: 300px;
			}
			
			.cube .cubeB {
				-webkit-transform: rotateY(180deg) translateZ(100px);
			}
			
			.cube .cubeC {
				-webkit-transform: rotateY(-90deg) translateZ(100px);
			}
			
			.cube .cubeD {
				-webkit-transform: rotateY(90deg) translateZ(100px);
			}
			
			.cube .cubeE {
				-webkit-transform: rotateX(-90deg) translateZ(100px);
			}
			
			.cube .cubeF {
				-webkit-transform: rotateX(90deg) translateZ(100px);
			}
		</style>
	</head>

	<body>
		<div class="main" style="width: 100%;height: 100%;position: relative;">

			<div class="container">
				<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
				<div class="cube">
					<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果-->
					<div class="cubeA rect" style="transform: translateZ(100px);">1</div>
					<!--具体效果看css就明白了。旋转下就好-->
					<div class="cubeB rect">2</div>
					<div class="cubeC rect">3</div>
					<div class="cubeD rect">4</div>
					<div class="cubeE rect">5</div>
					<div class="cubeF rect">6</div>
				</div>
			</div>
			<div class="container">
				<div class="cube cubeLeft">
					<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果-->
					<div class="cubeA rect" style="transform: translateZ(100px);">1</div>
					<!--具体效果看css就明白了。旋转下就好-->
					<div class="cubeB rect">2</div>
					<div class="cubeC rect">3</div>
					<div class="cubeD rect">4</div>
					<div class="cubeE rect">5</div>
					<div class="cubeF rect">6</div>
				</div>
			</div>
			<div class="container">
				<div class="cube cubeRight">
					<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果-->
					<div class="cubeA rect" style="transform: translateZ(100px);">1</div>
					<!--具体效果看css就明白了。旋转下就好-->
					<div class="cubeB rect">2</div>
					<div class="cubeC rect">3</div>
					<div class="cubeD rect">4</div>
					<div class="cubeE rect">5</div>
					<div class="cubeF rect">6</div>
				</div>
			</div>
		</div>
	</body>

</html>